<template>
    <div class="orderdetails">
        <div class="title">
            <div class="t1">
                订单号：{{orderdetails.orderNumber}}
                <el-button  type="danger"  style="margin: 0 5px" @click="zuofei">作废</el-button>
            </div>
            <div class="t2">
                尊敬的客户，你正在操作订单，请您耐心等待
            </div>
        </div>
        <div class="content">
            <div style="margin-top: 20px;">
                <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
                    <el-step :title="item.title" description="" v-for="(item,index) in stepsData" :key="index">
                    </el-step>
                </el-steps>
            </div>
            <div class="table" style="margin-top: 20px;">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-table
                                    :cell-style="rowClass"
                                    :header-cell-style="headClass"
                                    border
                                    :data="orderdetails.orderDetailsList"
                                    style="width: 100%">
                                <el-table-column
                                        label="商品编码"
                                        width="">
                                    <template slot-scope="scope">
                                        {{ scope.row.goodsId}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="商品名称"
                                        width="">
                                    <template slot-scope="scope">
                                        {{scope.row.goods.goodsName}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="参数"
                                        width="">
                                    <template slot-scope="scope">
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="单价"
                                        width="">
                                    <template slot-scope="scope">
                                        {{scope.row.goods.goodsOrderPrice}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="数量"
                                        width=""
                                >
                                    <template slot-scope="scope">
                                        {{scope.row.goods.goodsNumber}}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="con1">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <span>
                                订单总额：<span style="color: red;">{{orderdetails.orderMainPrice}}元</span>
                            </span>
                            <span style="margin: 0 10px">
                                应付总额：{{orderdetails.orderMainPrice}}元
                            </span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="con2">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            备注信息：
                            <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    style="width: 37%"
                                    v-model="textarea">
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="con3">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <span>客户信息：</span>
                            地址：<el-input v-model="orderdetails.receivingInfo.receivingAddress" disabled/>
                            名字：<el-input v-model="orderdetails.receivingInfo.receivingName" disabled/>
                            电话：<el-input v-model="orderdetails.receivingInfo.receivingTel" disabled/>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="con4">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-button  type="primary" style="background-color: #099FB8" @click="backorder">返回</el-button>
                            <el-button  type="primary" style="background-color: #099FB8" @click="submit">确认</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters,mapActions} from 'vuex'
    export default {
        name: "OrderDetails",
        data(){
            return{
                ordernum:'',
                allmoney:'',
                textarea:'',
                khaddress:'',
                khname:'',
                khphone:'',
                stepsData:[
                    {
                        title:'提交订单'
                    },
                    {
                        title:'订单审核'
                    },
                    {
                        title:'财务审核'
                    },
                    {
                        title:'出库审核'
                    },
                    {
                        title:'发货确认'
                    },
                    {
                        title:'收货确认'
                    },
                    {
                        title:'完成'
                    },
                ],
                orderdetails:{
                    creator: "",//制单人
                    deliveryDate: "",//交货时间
                    orderAuditStatus: 0,//订单状态
                    orderMainPrice: 1000,//订单金额
                    orderNumber:"",//订单金额
                    receivingInfo: {
                        clientName: "",//客户名称
                        receivingName: "",//收货人名称
                        receivingTel: 0,//收货人电话
                        receivingAddress: ""//收货人地址
                    },
                    orderDetailsList:[]
                },
            }
        },
        methods:{
            ...mapActions(['getzfOrder']),
            ...mapGetters(['getorderdetails','getordernumder','getmoney','getname','getaddress','getphone']),
            // 表头样式设置
            headClass () {
                return 'text-align: center;background:#F5F6F7;'
            },
            // 表格样式设置
            rowClass () {
                return 'text-align: center;'
            },
            backorder(){
                this.$router.push('/Main/Order/PurchaseOrder')
            },
            submit(){
                let obj={}
                console.log(this.textarea)
                if(this.textarea===""){
                    this.$message.error('信息不能为空')
                }else {
                    obj.textarea=this.textarea
                    // obj.khaddress=this.khaddress
                    // obj.khname=this.khname
                    // obj.khphone=this.khphone
                    console.log(obj)
                    this.$router.push('/Main/Order/PurchaseOrder')
                }
            },
            zuofei(){
            //   改变订单状态，通过订单号或者id???
                let orderMainId=this.orderdetails.orderNumber
                this.getzfOrder(orderMainId).then(res=>{
                    if(res===200){
                        this.$message.success('操作成功')
                        this.$router.push('/Main/Order/PurchaseOrder')
                    }else {
                        this.$message.error('操作失败')
                    }
                })
            }
        },
        created() {
            this.orderdetails=this.getorderdetails()
            console.log( [] == ![] )
        }
    }
</script>

<style scoped lang="less">
.title{
    margin: 20px 0;
    width: 100%;
    border: 1px solid orange;
    .t1{
        font-weight: bold;
        font-size: 14px;
        border-bottom: 1px solid #b2b2b2;
        padding: 10px;
    }
    .t2{
        font-size: 12px;
        color: #99a9bf;
        padding: 10px;
    }
}
.con1,.con2,.con3,.con4{
    margin-top: 20px;
}
.con2,.con3{
    color: #99a9bf;
}
.con3 .el-input{
    width: 150px;
    margin: 0 10px;
}
</style>